<template>
  <div style="background: #f0f0f0;">
    right组件

    我要监听 自定义事件（getResult）

    <h3 style="color: red;" v-show="show">我已经监听到来自{{fromName}}组件触发了getResult事件</h3>

    <button @click="emitToEvent('getList',list)">触发对外事件（getList）</button>
  </div>
</template>

<script>
export default {
  name: "right",
  data(){
    return {
      show: false,
      list: ['我是来自right组件数据1','我是来自right组件数据2'],
      fromName: null
    }
  },
  methods:{
    /***
     * 监听的事件处理
     * @from (事件触发的组件对象)
     * @eName (触发事件的名字)
     * @eParams (触发事件传递的参数)
     * ***/
    emitEvent(from,eName,eParams){
      if(eName==='getResult'){
        //监听事件要做的事
        this.show = true;
        this.fromName = from.component;
      }
    },
    /***
     * 触发事件
     * @eName (触发事件的名字)
     * @eParams (触发事件传递的参数)
     * ***/
    emitToEvent(eName,eParams){
      this.$emit('emitEvents',eName,eParams); //触发事件，并且传递参数
    }
  }
}
</script>

<style scoped>

</style>